/* eslint-disable */
import Vue from 'vue';
import goat from './goat.vue';
import bird from './bird.vue';
import dragon from './dragon.vue';
import lion from './lion.vue';
import phoenix from './phoenix.vue';
import common from './common.vue';

const goatConstructor = Vue.extend(goat);
const birdConstructor = Vue.extend(bird);
const dragonConstructor = Vue.extend(dragon);
const lionConstructor = Vue.extend(lion);
const phoenixConstructor = Vue.extend(phoenix);
const commonConstructor = Vue.extend(common);

const waitEnterEffect = [];
let isPlaying = false;
//  观察Observer ended属性变化，当前动画播放完毕播放下一个
const Observer = {};
Object.defineProperty(Observer, 'ended', {
    configurable: true,
    enumerable: true,
    get() {
        return false;
    },
    set(val) {
        if (val) {
            console.log('当前进场动画执行完毕!');
            isPlaying = false;
            playEnterEffect();
        }
    },
});
// 播放进场效果
function playEnterEffect() {
    if (waitEnterEffect.length > 0) {
        const enterEffect = waitEnterEffect.shift();
        // 创建bapin dom
        createEnterEffectDom(enterEffect);
    }
}
// user {name、headImg、time、enterEffectType}
function createEnterEffectDom(user) {
    // 用户信息不完善
    if (!user.name || !user.headImg) {
        return;
    }
    // 进场效果正在播放中
    if (isPlaying) {
        waitEnterEffect.push(user);
        return;
    }
    isPlaying = true;
    // 构建 进场效果dom
    let enterEffect = null;
    if (user.enterEffectType === 'goat') {
        enterEffect = new goatConstructor({
            data: {
                headImg: user.headImg,
                name: user.name,
                Observer: Observer,
            },
        });
    } else if (user.enterEffectType === 'bird') {
        enterEffect = new birdConstructor({
            data: {
                headImg: user.headImg,
                name: user.name,
                Observer: Observer,
            },
        });
    } else if (user.enterEffectType === 'dragon') {
        enterEffect = new dragonConstructor({
            data: {
                headImg: user.headImg,
                name: user.name,
                Observer: Observer,
            },
        });
    } else if (user.enterEffectType === 'lion') {
        enterEffect = new lionConstructor({
            data: {
                headImg: user.headImg,
                name: user.name,
                Observer: Observer,
            },
        });
    }else if (user.enterEffectType === 'phoenix') {
        enterEffect = new phoenixConstructor({
            data: {
                headImg: user.headImg,
                name: user.name,
                Observer: Observer,
            },
        });
    }else if (user.enterEffectType === 'common') {
        enterEffect = new commonConstructor({
            data: {
                headImg: user.headImg,
                name: user.name,
                Observer: Observer,
            },
        });
    }
    if (document.getElementById('enterEffectContainer')) {
        enterEffect.$mount();
        document.getElementById('enterEffectContainer').appendChild(enterEffect.$el);
    }

}

const install = (vue) => {
    vue.prototype.$createEnterEffect = createEnterEffectDom;
};

export default { install };
